<template>
	<div class="content">
		<h2 class="title">热门精选</h2>
		<div class="list">
			<template v-for="(item, index) in houselist" :key="item.data.houseId">
				<home-item-v9
					v-if="item.discoveryContentType === 9"
					:itemData="item.data"
					@click="itemClick(item.data)"
				></home-item-v9>
				<home-item-v3
					v-else-if="item.discoveryContentType === 3"
					:itemData="item.data"
					@click="itemClick(item.data)"
				></home-item-v3>
			</template>
		</div>
	</div>
</template>

<script setup>
	import homeItemV9 from '@/components/home-item-v9/home-item-v9.vue'
	import homeItemV3 from '@/components/home-item-v3/home-item-v3.vue'
	import useHomeStore from '@/stores/modules/home'
	import { storeToRefs } from 'pinia'
	import { useRouter } from 'vue-router'

	const router = useRouter()
	const homeStore = useHomeStore()
	const { houselist } = storeToRefs(homeStore)

	const itemClick = (item) => {
		// console.log('item: ', item)
		router.push(`/detail/${item.houseId}`)
	}
</script>

<style lang="less" scoped>
	.content {
		padding: 10px 8px;
		.title {
			font-size: 22px;
			padding: 10px;
		}

		.list {
			display: flex;
			flex-wrap: wrap;
		}
	}
</style>
